import 'package:flutter/material.dart';
import 'package:portal_website/pages/common_header.dart';

class DoubleCarrierPage extends StatefulWidget {
  @override
  _DoubleCarrierPageState createState() => _DoubleCarrierPageState();
}

class _DoubleCarrierPageState extends State<DoubleCarrierPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _opacityAnimation;
  int _activeNavIndex = 2;

  @override
  void initState() {
    super.initState();
    // 页面加载动画
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
    _opacityAnimation = Tween<double>(begin: 0, end: 1).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.easeIn),
    );

    // 延迟执行动画
    Future.delayed(Duration(milliseconds: 100), () {
      _animationController.forward();
    });
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  // 导航菜单项
  final List<String> _navItems = ['首页', '政策法规', '双创载体', '动态咨询', '企业云图', '联系我们'];

  // 载体卡片数据
  final List<CarrierCardData> _carrierCards = [
    CarrierCardData(
      icon: '🏢',
      name: '科技企业孵化器',
      type: '孵化载体',
      description: '为初创科技企业提供办公场地、基础设施和创业服务，降低创业成本，提高创业成功率。',
      stats: ['孵化面积：10000㎡', '在孵企业：80+'],
    ),
    CarrierCardData(
      icon: '🚀',
      name: '加速器',
      type: '加速载体',
      description: '为成长期企业提供高端办公空间、投融资对接、市场拓展等加速服务，助力企业快速发展。',
      stats: ['加速企业：30+', '融资成功率：75%'],
    ),
    CarrierCardData(
      icon: '🏭',
      name: '产业园区',
      type: '产业载体',
      description: '聚焦特定产业领域，集聚产业链上下游企业，形成产业生态系统，促进产业升级和创新发展。',
      stats: ['入园企业：200+', '年产值：50亿'],
    ),
  ];

  // 特色服务数据
  final List<FeatureItemData> _featureItems = [
    FeatureItemData(
      icon: '💡',
      title: '创业培训',
      description: '提供创业理论、实践技能等方面的培训课程，提升创业者的综合素质和创业能力。',
    ),
    FeatureItemData(
      icon: '🤝',
      title: '投融资对接',
      description: '定期举办投融资对接会，连接创业项目与投资机构，助力企业获得发展资金。',
    ),
    FeatureItemData(
      icon: '📚',
      title: '政策咨询',
      description: '提供政策解读、申报指导等服务，帮助企业享受政府扶持政策，降低运营成本。',
    ),
    FeatureItemData(
      icon: '🌐',
      title: '国际拓展',
      description: '提供国际市场拓展服务，包括海外资源对接、国际展会参与等，助力企业走向全球。',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    // Container(
    //   decoration: BoxDecoration(
    //     gradient: LinearGradient(
    //       colors: [Color(0xFF1e3c72), Color(0xFF2a5298)],
    //       begin: Alignment.topLeft,
    //       end: Alignment.bottomRight,
    //     ),
    //     boxShadow: [
    //       BoxShadow(
    //         color: Colors.black12,
    //         blurRadius: 10,
    //         offset: Offset(0, 2),
    //       ),
    //     ],
    //   ),
    //   child: Container(
    //     padding: EdgeInsets.symmetric(horizontal: 20),
    //     height: 70,
    //     child: Row(
    //       mainAxisAlignment: MainAxisAlignment.spaceBetween,
    //       children: [
    //         Text(
    //           '城乡一体化示范区',
    //           style: TextStyle(
    //             color: Colors.white,
    //             fontSize: 24,
    //             fontWeight: FontWeight.bold,
    //           ),
    //         ),
    //         Row(
    //           children: List.generate(_navItems.length, (index) {
    //             return Padding(
    //               padding: EdgeInsets.symmetric(horizontal: 10),
    //               child: InkWell(
    //                 onTap: () {
    //                   setState(() {
    //                     _activeNavIndex = index;
    //                   });
    //                 },
    //                 borderRadius: BorderRadius.circular(5),
    //                 child: Container(
    //                   padding: EdgeInsets.symmetric(
    //                       horizontal: 15, vertical: 10),
    //                   decoration: BoxDecoration(
    //                     color: _activeNavIndex == index
    //                         ? Colors.white24
    //                         : Colors.transparent,
    //                     borderRadius: BorderRadius.circular(5),
    //                   ),
    //                   child: Text(
    //                     _navItems[index],
    //                     style: TextStyle(
    //                       color: Colors.white,
    //                       fontSize: 16,
    //                       fontWeight: FontWeight.w500,
    //                     ),
    //                   ),
    //                 ),
    //               ),
    //             );
    //           }),
    //         ),
    //       ],
    //     ),
    //   ),
    // ),
    return AnimatedBuilder(
      animation: _opacityAnimation,
      builder: (context, child) {
        return Opacity(
          opacity: _opacityAnimation.value,
          child: child,
        );
      },
      child: Expanded(
        child: Container(
          // padding: EdgeInsets.all(20),
          constraints: BoxConstraints(maxWidth: 1200),
          margin: EdgeInsets.symmetric(horizontal: 10),
          child: Column(
            children: [
              // 页面标题区域
              Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Colors.white, Color(0xFFf0f8ff)],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                  borderRadius: BorderRadius.circular(15),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black12,
                      blurRadius: 20,
                      offset: Offset(0, 5),
                    ),
                  ],
                ),
                padding: EdgeInsets.symmetric(vertical: 40),
                margin: EdgeInsets.only(bottom: 60),
                width: double.infinity,
                child: Column(
                  children: [
                    Text(
                      '双创载体',
                      style: TextStyle(
                        color: Color(0xFF1e3c72),
                        fontSize: 36,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 15),
                    Text(
                      '创新沃土 · 创业摇篮',
                      style: TextStyle(
                        color: Color(0xFF666666),
                        fontSize: 18,
                      ),
                    ),
                    SizedBox(height: 20),
                    Container(
                      constraints: BoxConstraints(maxWidth: 800),
                      padding: EdgeInsets.symmetric(horizontal: 20),
                      child: Text(
                        '展示城乡一体化示范区关于双创载体的资源信息，包括孵化园区、产业园区和众创空间， 为创业者提供优质的创业环境和资源支持，助力创新创业项目快速成长。',
                        style: TextStyle(
                          color: Color(0xFF555555),
                          fontSize: 16,
                          height: 1.8,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ],
                ),
              ),

              // 载体类型部分
              ContentDoubleSection(
                title: '🏢 孵化园区',
                subtitle: 'Incubation Park',
                content: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(bottom: 20),
                      child: Text(
                        '孵化园区为初创企业提供全方位的孵化服务，包括办公场地、创业辅导、投融资对接等， 帮助初创企业快速成长，打造创新创业的优质生态圈。',
                        style: TextStyle(
                          color: Color(0xFF555555),
                          fontSize: 16,
                          height: 1.8,
                        ),
                      ),
                    ),
                    CarrierGrid(cards: _carrierCards),
                  ],
                ),
              ),

              // 载体服务部分
              ContentDoubleSection(
                title: '💼 产业园区',
                subtitle: 'Industrial Park',
                content: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(bottom: 20),
                      child: Text(
                        '产业园区为成长型企业提供专业化的发展空间，集聚产业链上下游资源， 形成产业集群效应，促进企业规模化发展。',
                        style: TextStyle(
                          color: Color(0xFF555555),
                          fontSize: 16,
                          height: 1.8,
                        ),
                      ),
                    ),
                    FeatureGrid(items: _featureItems),
                  ],
                ),
              ),

              // 载体分布部分
              ContentDoubleSection(
                title: '🗺️ 载体分布',
                subtitle: 'Carrier Distribution',
                content: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(bottom: 20),
                      child: Text(
                        '示范区内双创载体布局合理，覆盖不同区域和产业领域，形成了完善的创业创新生态系统。',
                        style: TextStyle(
                          color: Color(0xFF555555),
                          fontSize: 16,
                          height: 1.8,
                        ),
                      ),
                    ),
                    // 地图容器
                    Container(
                      height: 400,
                      decoration: BoxDecoration(
                        color: Color(0xFFe9f5ff),
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: Center(
                        child: Text(
                          '载体分布地图',
                          style: TextStyle(
                            color: Color(0xFF1e3c72),
                            fontSize: 18,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 载体卡片数据模型
class CarrierCardData {
  final String icon;
  final String name;
  final String type;
  final String description;
  final List<String> stats;

  CarrierCardData({
    required this.icon,
    required this.name,
    required this.type,
    required this.description,
    required this.stats,
  });
}

// 载体网格组件
class CarrierGrid extends StatelessWidget {
  final List<CarrierCardData> cards;

  CarrierGrid({required this.cards});

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      // crossAxisCount: MediaQuery.of(context).size.width < 768 ? 1 : 3,
      //
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 600,
          mainAxisSpacing: 30,
          crossAxisSpacing: 30,
          mainAxisExtent: 450),
      itemBuilder: (BuildContext context, int index) {
        CarrierCardData card = cards[index];
        return CarrierCard(data: card);
      },
      itemCount: cards.length,
    );
  }
}

// 载体卡片组件
class CarrierCard extends StatelessWidget {
  final CarrierCardData data;

  CarrierCard({required this.data});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Color(0xFFe1e8ed)),
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black54,
            blurRadius: 15,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        children: [
          // 卡片图标区域
          Container(
            height: 200,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Color(0xFF4facfe), Color(0xFF00f2fe)],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
            ),
            child: Center(
              child: Text(
                data.icon,
                style: TextStyle(
                  fontSize: 48,
                  color: Colors.white,
                ),
              ),
            ),
          ),
          // 卡片内容
          Padding(
            padding: EdgeInsets.all(25),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  data.name,
                  style: TextStyle(
                    color: Color(0xFF1e3c72),
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(
                  height: 12,
                ),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [Color(0xFF4facfe), Color(0xFF00f2fe)],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Text(
                    data.type,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 12,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  margin: EdgeInsets.only(bottom: 15),
                ),
                Text(
                  data.description,
                  style: TextStyle(
                    color: Color(0xFF666666),
                    height: 1.7,
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                if (data.stats.isNotEmpty)
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: data.stats.map((stat) {
                      return Text(
                        stat,
                        style: TextStyle(
                          color: Color(0xFF888888),
                          fontSize: 13,
                        ),
                      );
                    }).toList(),
                  ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

// 特色功能数据模型
class FeatureItemData {
  final String icon;
  final String title;
  final String description;

  FeatureItemData({
    required this.icon,
    required this.title,
    required this.description,
  });
}

// 特色功能网格组件
class FeatureGrid extends StatelessWidget {
  final List<FeatureItemData> items;

  FeatureGrid({required this.items});

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      // crossAxisCount: MediaQuery.of(context).size.width < 768 ? 1 : 3,
      //
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 600,
          mainAxisSpacing: 30,
          crossAxisSpacing: 30,
          mainAxisExtent: 450),
      itemBuilder: (BuildContext context, int index) {
        FeatureItemData item = items[index];
        return FeatureItem(data: item);
      },
      itemCount: items.length,
    );
  }
}

// 特色功能项组件
class FeatureItem extends StatelessWidget {
  final FeatureItemData data;

  FeatureItem({required this.data});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xFFf8fbff), Color(0xFFf0f8ff)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        border: Border.all(color: Color(0xFFe1e8ed)),
        borderRadius: BorderRadius.circular(12),
      ),
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 30),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            data.icon,
            style: TextStyle(
              fontSize: 40,
              color: Color(0xFF1e3c72),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Text(
            data.title,
            style: TextStyle(
              color: Color(0xFF1e3c72),
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(
            height: 10,
          ),
          Text(
            data.description,
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 14,
              height: 1.6,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}
